<script>
import ProjectEdit from '@/views/project/ProjectEdit.vue'
import PreviewImage from '@/components/PreviewImage.vue'
export default {
  name: 'ProjectList',
  components: { PreviewImage, ProjectEdit },
  data () {
    return {
      searchForm: {},
      dataList: [],
      pageInfo: {
        page: 1,
        limit: 5,
        count: 0
      },
      ids: [],
      showImage: false,
      imageUrl: '',
      showImageList: false,
      imageUrlList: []
    }
  },
  methods: {
    getDataList () {
      this.$axios.get('project2', {
        params: {
          param: 'list',
          ...this.pageInfo,
          ...this.searchForm
        }
      }).then(data => {
        this.dataList = data.list
        this.pageInfo.count = data.count
      }).catch(e => e)
    },
    currentChange (value) {
      this.pageInfo.page = value
      this.getDataList()
    },
    sizeChange (value) {
      this.pageInfo.page = 1
      this.pageInfo.limit = value
      this.getDataList()
    },
    clear () {
      this.searchForm = { ...this.$options.data().searchForm }
      this.pageInfo = { ...this.$options.data().pageInfo }
      this.getDataList()
    },
    deleteInfo (id) {
      let deleteIds = []
      if (id) {
        deleteIds.push(id)
      } else {
        if (this.ids.length === 0) {
          this.$alert('请至少选中一行！', { type: 'error' })
          return false
        }
        deleteIds = [...this.ids]
      }
      this.$confirm(`确定删除编号[${deleteIds}]的数据吗?`, { type: 'info' }).then(() => {
        this.$axios.delete('project2', {
          params: {
            param: 'delete', ids: deleteIds?.toString()
          }
        }).then(() => {
          this.$message.success('删除成功')
          this.getDataList()
        })
      }).catch(e => e)
    },
    selectionChange (selection) {
      this.ids = selection.map(item => item.id)
    },
    showDialog (id) {
      this.$refs.projectEdit.getById(id)
    },
    preview (src) {
      this.$refs.previewImage.setImageList(src)
    },
    previewList (id) {
      this.$axios.get('project2', { params: { param: 'info', id } }).then(data => {
        this.$refs.previewImage.setImageList(data.projectImgList.map(item => item.src))
      }).catch(e => e)
    },
    async init () {
      await this.getDataList()
    }
  },
  created () {
    /* 确保init方法在dom加载完后执行 */
    this.$nextTick(() => {
      this.init()
    })
  }
}
</script>

<template>
  <div>
    <el-card>
      <el-form inline :model="searchForm" label-width="80px">
        <el-form-item label="课程名称">
          <el-input v-model="searchForm.name" placeholder="请输入轮播名称" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button @click="getDataList">查询</el-button>
          <el-button @click="clear">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-button-group style="margin-bottom: 10px">
        <el-button @click="showDialog()">添加</el-button>
        <el-button @click="deleteInfo()">删除</el-button>
      </el-button-group>
      <el-table :data="dataList" border highlight-selection-row @selection-change="selectionChange">
        <el-table-column type="selection"/>
        <el-table-column label="课程名称" prop="name"/>
        <el-table-column label="课程介绍" prop="profile" show-overflow-tooltip/>
        <el-table-column label="课程大纲" prop="src">
          <template slot-scope="{row}">
            <el-button type="primary" @click="preview(row.src)">查看图片</el-button>
          </template>
        </el-table-column>
        <el-table-column label="课程详情">
          <template slot-scope="{row}">
            <el-button type="primary" @click="previewList(row.id)">查看图片</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="text" @click="showDialog(row.id)">修改</el-button>
            <el-button type="text" @click="deleteInfo(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="pageInfo.count" :current-page="pageInfo.page" :page-size="pageInfo.limit"
                     :page-sizes="[5,10,20,50,100]" layout="total,prev,pager,next,jumper,sizes"
                     @current-change="currentChange" @size-change="sizeChange"/>
    </el-card>
    <project-edit ref="projectEdit" @close="getDataList"/>
    <preview-image ref="previewImage"/>
  </div>
</template>

<style scoped lang="scss">

</style>
